@charset "UTF-8";


/*************************
 * Check and Radio items *
 *************************/

checkbutton.text-button,
radiobutton.text-button {
    // this is for a nice focus on check and radios text
    padding: 2px 0;
    outline-offset: 0;

    label:not(:only-child) {
        &:first-child {
            margin-left: 4px;
        }
        &:last-child {
            margin-right: 4px;
        }
    }
    &:active check,
    &:active radio {
        -gtk-icon-transform: translate(1px, 1px);
    }
}

check,
radio {
    margin: 0 4px;

    &:only-child {
        margin: 0;
    }

    min-height: 14px;
    min-width: 14px;
    //border: none;
    animation: none;
    background-color: transparent;

    menu menuitem & {
        margin: 0; // this is a workaround for a menu check/radio size allocation issue
        min-height: 14px;
        min-width: 14px;
        background-color: transparent;
        box-shadow: none;
        -gtk-icon-shadow: none;
        animation: none;
    }
}


@each $type in ("check", "radio") {
    #{$type} {
        -gtk-icon-source: url("../assets/#{$type}-unchecked-normal.svg");

        @each $action in ("hover", "active", "disabled") {
            &:#{$action} {
                -gtk-icon-source: url("../assets/#{$type}-unchecked-#{$action}.svg");
            }
        }

        @each $state in ("checked", "indeterminate") {
            &:#{$state} {
                -gtk-icon-source: url("../assets/#{$type}-#{$state}-normal.svg");
            }

            @each $action in ("hover", "active", "disabled") {
                &:#{$state}:#{$action} {
                    -gtk-icon-source: url("../assets/#{$type}-#{$state}-#{$action}.svg");
                }
            }
        }
    }
}
